<template>
  <div class="login-page">
    <div class="circles circles-1" />
    <div class="circles circles-2" />
    <el-card class="login-card" shadow="always">
      <div class="brand">
        <div class="brand-logo">ERP</div>
        <div class="brand-title">生产管理平台</div>
        <div class="brand-sub">欢迎回来，请登录开始使用</div>
      </div>

      <el-form :model="form" :rules="rules" ref="formRef" label-width="0" class="login-form">
        <el-form-item prop="userName">
          <el-input v-model="form.userName" placeholder="用户名/工号" size="large" clearable @keyup.enter="onSubmit">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码" size="large" show-password @keyup.enter="onSubmit">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" class="login-btn" :loading="loading" round @click="onSubmit">登 录</el-button>
        </el-form-item>
        <div class="tips">
          测试账号：admin / 123456
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import ERP from '@/utils/Interceptors'

interface LoginResp { token?: string; userId?: string; userName?: string; realName?: string }

const router = useRouter()
const formRef = ref()
const loading = ref(false)
const form = reactive({ userName: 'admin', password: '123456' })
const rules = {
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

async function onSubmit() {
  if (loading.value) return
  await formRef.value?.validate()
  loading.value = true
  try {
    const { data } = await ERP.post('/api/Auth/Login', form)
    if (data?.code !== 200) {
      ElMessage.error(data?.msg || '登录失败')
      return
    }
    const resp: LoginResp = data.data || {}
    localStorage.setItem('erp_token', resp.token || '')
    localStorage.setItem('erp_userName', resp.userName || '')
    localStorage.setItem('erp_realName', resp.realName || '')
    ElMessage.success('登录成功')
    router.push({ name: 'Welcome' })
  } catch (e: any) {
    ElMessage.error(e?.message || '请求失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  overflow: hidden;
}
.circles {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
}
.circles-1 { width: 280px; height: 280px; top: 10%; left: 8%; background: #90caf9; }
.circles-2 { width: 320px; height: 320px; bottom: 8%; right: 10%; background: #ce93d8; }

.login-card {
  width: 440px;
  padding: 8px 4px 18px 4px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(150%) blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-radius: 16px;
}
.brand { text-align: center; margin: 8px 0 18px; }
.brand-logo {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 8px; border-radius: 14px;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  color: #fff; font-weight: 700; font-size: 20px;
}
.brand-title { font-size: 20px; font-weight: 600; color: #333; }
.brand-sub { font-size: 13px; color: #888; margin-top: 4px; }

.login-form { padding: 0 10px; }
.login-btn { width: 100%; margin-top: 6px; }
.tips { text-align: center; font-size: 12px; color: #909399; margin-top: -6px; }
</style>
